import React, { CSSProperties } from 'react';
import { Image, View } from '@tarojs/components';
import { GStyleSheet, DynamicColors } from '@/utils/DarkMode';
import addIcon from '@/assets/images/add_icon_default.png';

interface IProps {
  style?: CSSProperties;
  onClick: () => void;
  iconStyle?: CSSProperties;
  id?: string;
}

const dstyles = GStyleSheet.create({
  contains: {

  },
  addIcon: {
    width: 15,
    height: 15,
    padding: 6,
    backgroundColor: DynamicColors.tintColor,
    borderRadius: 30,
  },
});

const CircleAddButton: React.FC<IProps> = React.memo(
  ({ onClick, iconStyle, style, id }) => {
    const styles = dstyles.useDynamicStyle();
    return (
      <View id={id} style={{ ...styles.contains, ...style }} className={`centerFlex ${id}`} onClick={onClick}>
        <Image style={{ ...styles.addIcon, ...iconStyle }} src={addIcon} />
      </View >
    );
  }
);

export default CircleAddButton;
